<template>
  <div>
    <nav-link-content
      v-if="componentType === 1"
      :is-active-class="isActiveClass"
      :content-data="componentData"
    ></nav-link-content>
    <nav-link-style
      v-if="componentType === 2"
      :content-data="componentData"
      @update-data="handleUpdateComponentData"
    ></nav-link-style>
  </div>
</template>

<script setup lang="ts">
  import NavLinkContent from './NavLinkContent.vue'
  import NavLinkStyle from './NavLinkStyle.vue'

  const props = defineProps({
    componentType: {
      type: Number,
      default: 1
    },
    componentData: {
      type: Object,
      default: () => ({})
    },
    isActiveClass: {
      type: String
    }
  })

  const emit = defineEmits(['updateProps'])

  const showComponentData = ref(props.componentData)

  function handleUpdateComponentData(value: any) {
    showComponentData.value = value

    emit('updateProps', value)
  }
</script>

<style scoped lang="scss"></style>
